<template>
  <div class="group-status-blowing">
    <div class="row" v-for="(rowItem, rowIndex) in jiTailist" :key="rowIndex">
      <div class="row-title">
        <span>{{ rowItem.lineName }}</span>
        <span class="manager">责任人：{{ rowItem.manager }}</span>
        <span class="founder">开台人：{{ rowItem.founder }}</span>
      </div>
      <div class="row-card">
        <el-row :gutter="14">
          <template v-for="(cardItem, cardIndex) in rowItem.qslLayoutCraftNode" :key="cardIndex">
            <template v-if="cardItem.craftNodeName != '梳棉'">
              <el-col
                :sm="12"
                :md="12"
                :lg="8"
                :xl="6"
                v-for="(typeItem, typeIndex) in cardItem.qslLayoutMachineDocument"
                :key="typeIndex"
                class="card-item"
              >
                <div>
                  <div class="card-header">
                    <div class="card-title">
                      {{ cardItem.craftNodeName }}
                      {{ typeItem.machineName }}-{{ typeItem.machineNo }}
                    </div>
                    <div
                      v-if="cardItem.craftNodeName != '梳棉'"
                      class="status"
                      :style="{ backgroundColor: zhuanTai.color(typeItem.machineDisplayState) }"
                    >
                      {{ zhuanTai.text(typeItem.machineDisplayState, processName) }}
                    </div>
                  </div>

                  <template v-if="cardItem.craftNodeName == '抓棉'">
                    <div class="card-content">
                      <div class="content-item table">
                        <div class="flex-item">
                          <span> {{ $t('custom.行走速度') }}</span>
                          <span>{{ typeItem.行走速度 }}m/min</span>
                        </div>
                        <el-divider direction="vertical" class="divider" />
                        <div class="flex-item">
                          <span> {{ $t('custom.打手速度') }}</span>
                          <span>{{ typeItem.打手速度 }}r/min</span>
                        </div>
                        <el-divider direction="vertical" class="divider" />
                        <div class="flex-item">
                          <span> {{ $t('custom.吸棉压力') }}</span>
                          <span>{{ typeItem.吸棉压力 }}mmwc</span>
                        </div>
                      </div>
                      <div class="content-item table" style="margin-bottom: 0">
                        <div class="flex-item">
                          <span> {{ $t('custom.运转率') }}</span>
                          <span>{{ typeItem.运转率 }}%</span>
                        </div>
                        <el-divider direction="vertical" class="divider" />
                        <div class="flex-item">
                          <span> {{ $t('custom.工作效率') }}</span>
                          <span>{{ typeItem.工作效率 }}%</span>
                        </div>
                        <el-divider direction="vertical" class="divider" />
                        <div class="flex-item">
                          <span> {{ $t('custom.当班停车时间') }}</span>
                          <span>{{ typeItem.当班停车时间 }} </span>
                        </div>
                        <el-divider direction="vertical" class="divider" />
                        <div class="flex-item">
                          <span> {{ $t('custom.上班停车时间') }}</span>
                          <span>{{ typeItem.上班停车时间 }}</span>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template v-if="cardItem.craftNodeName == '混棉'">
                    <div class="card-content">
                      <div class="content-item table box">
                        <div class="box-item">
                          <el-icon size="40"><Compass /></el-icon>
                          <span>{{ $t('custom.棉仓压力') }}</span>
                          <span>
                            {{
                              !typeItem.棉仓压力 ? 0 : Math.round(typeItem.棉仓压力 * 100) / 100
                            }}mmwc
                          </span>
                        </div>
                        <div class="box-item">
                          <el-icon><Compass /></el-icon>
                          <span>{{ $t('custom.当班停车时间') }}</span>
                          <span>{{ typeItem.当班停车时间 }} </span>
                        </div>
                        <div class="box-item">
                          <el-icon><Compass /></el-icon>
                          <span>{{ $t('custom.上班停车时间') }}</span>
                          <span>{{ typeItem.上班停车时间 }}</span>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template v-if="cardItem.craftNodeName == '开棉'">
                    <div class="card-content">
                      <div class="content-item table box">
                        <div class="box-item">
                          <el-icon><Compass /></el-icon>
                          <span>{{ $t('custom.给棉速度') }}</span>
                          <span>{{ typeItem.给棉速度 }} </span>
                        </div>
                        <div class="box-item">
                          <el-icon><Compass /></el-icon>
                          <span>{{ $t('custom.打手速度') }}</span>
                          <span>{{ typeItem.打手速度 }}r/min</span>
                        </div>
                        <div class="box-item">
                          <el-icon size="40"><Compass /></el-icon>
                          <span>{{ $t('custom.管道压力') }}</span>
                          <span>
                            {{
                              !typeItem.管道压力 ? 0 : Math.round(typeItem.管道压力 * 100) / 100
                            }}Pa
                          </span>
                        </div>
                        <div class="box-item">
                          <el-icon><Compass /></el-icon>
                          <span>{{ $t('custom.梳棉开台数') }}</span>
                          <span>{{ typeItem.梳棉开台数 }}台</span>
                        </div>
                      </div>
                    </div>
                  </template>
                </div>
              </el-col>
            </template>
            <template v-else>
              <el-col :sm="12" :md="12" :lg="8" :xl="6" class="card-item">
                <div>
                  <div class="card-header">
                    <div class="card-title">
                      {{ cardItem.craftNodeName }}：{{ cardItem.total }}台
                    </div>
                  </div>
                  <div class="card-content">
                    <div class="content-item table">
                      <div class="flex-item">
                        <span><i class="run"></i>{{ $t('custom.运行台数') }}</span>
                        <span>{{ cardItem.runningCount }}台</span>
                      </div>
                      <el-divider direction="vertical" class="divider" />
                      <div class="flex-item">
                        <span><i class="stop"></i>{{ $t('custom.停车台数') }}</span>
                        <span>{{ cardItem.parkingCount }}台</span>
                      </div>
                      <el-divider direction="vertical" class="divider" />
                      <div class="flex-item">
                        <span><i class="off"></i>{{ $t('custom.离线台数') }}</span>
                        <span>{{ cardItem.offLineCount }}台</span>
                      </div>
                    </div>
                    <div class="content-item table">
                      <div class="flex-item">
                        <span>{{ $t('custom.当班/上班产量') }}（kg）</span>
                        <span>{{ cardItem.当班产量 }}/{{ cardItem.上班产量 }}</span>
                      </div>
                      <el-divider direction="vertical" class="divider" />
                      <div class="flex-item">
                        <span>{{ $t('custom.上班/当班桶数') }}</span>
                        <span>{{ cardItem.上班桶数 }}/{{ cardItem.当班桶数 }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </template>
          </template>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { zhuanTai } from '@/utils/custom/index'
  import { getDuration } from '@/utils/common'
  import { Compass } from '@element-plus/icons-vue'
  import {
    getHuoQuQingShuLianBuJu,
    getQingHuaXiaCanShu,
    getQingHuaXiaCanShu_qy
  } from '@/api/shengChanJianShi'

  const props = defineProps({
    processName: {
      type: String,
      default: ''
    }
  })

  const jiTailist = ref()
  const getLayoutData = () => {
    getHuoQuQingShuLianBuJu().then((res: any) => {
      jiTailist.value = res
      getBlowingParams()
    })
  }

  const craftNodeNameObjEnum = {
    抓棉: 'overviewZm',
    混棉: 'overviewHm',
    开棉: 'overviewJk',
    异纤: 'overviewYx',
    梳棉: 'overviewSm'
  }
  const getBlowingParams = () => {
    // 此处 需要取 cookies 字段 quyuNum 判断使用哪一个接口 1：getQingHuaXiaCanShu_qy
    // 暂时先用getQingHuaXiaCanShu
    getQingHuaXiaCanShu().then((res: any) => {
      for (let index = 0; index < jiTailist.value.length; index++) {
        const value = jiTailist.value[index]
        // 开台人和责任人 赋值
        value.manager =
          res.overviewQslLine && res.overviewQslLine.length != 0
            ? res.overviewQslLine[index].责任人
            : ''
        value.founder =
          res.overviewQslLine && res.overviewQslLine.length != 0
            ? res.overviewQslLine[index].看台人
            : ''

        for (let j = 0; j < value.qslLayoutCraftNode.length; j++) {
          const item = value.qslLayoutCraftNode[j]
          if (item.craftNodeName === '梳棉') {
            const key = craftNodeNameObjEnum[item.craftNodeName]
            value.qslLayoutCraftNode[j] = {
              ...item,
              ...res[key][index],
              total:
                res[key][index].offLineCount +
                res[key][index].runningCount +
                res[key][index].faultCount
            }
          } else {
            for (let num = 0; num < item.qslLayoutMachineDocument.length; num++) {
              const node = item.qslLayoutMachineDocument[num]
              const targetVal = res[craftNodeNameObjEnum[item.craftNodeName]].find((val) => {
                return node.machineDocumentId === val.machineDocumentId
              })
              item.qslLayoutMachineDocument[num] = {
                ...node,
                ...targetVal,
                当班停车时间: getDuration(targetVal.当班停车时间),
                上班停车时间: getDuration(targetVal.上班停车时间)
              }
            }
          }
        }
      }
      console.log(jiTailist.value)
    })
  }

  onMounted(() => {
    getLayoutData()
  })
</script>
<style scoped lang="scss">
  .group-status-blowing {
    .row {
      margin-bottom: 20px;

      .row-title {
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        font-weight: 500;
        font-size: 18px;
        color: #202121;
        box-sizing: border-box;
        border-radius: 8px 8px 0px 0px;
        background-color: #c9e5a6;

        .manager,
        .founder {
          font-weight: normal;
          font-size: 17px;
        }
        .manager {
          margin: 0 70px 0 80px;
        }
      }
      .row-card {
        padding: 10px;
        box-sizing: border-box;
        .card-item {
          background-color: #fff;
          // flex: 1;
          // min-width: 380px;
          //   margin: 0 12.5px 20px;
          & > div {
            border: 1px solid #dcdcdc;
            border-radius: 8px;
            height: 100%;
          }
          .card-header {
            position: relative;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            color: rgba($color: #000000, $alpha: 0.9);
            background-image: url('../../../../assets/images/device-monitor/xs-cardTitleBg.png');
            background-size: 100% 100%;
            background-position: 0 0;

            .card-title {
              text-align: center;
              font-weight: bold;
              font-size: 16px;
            }

            .status {
              width: auto;
              padding: 0 15px;
              font-weight: 400;
              font-size: 13px;
              color: #fff;
              border-radius: 0px 8px 0px 20px;
              position: absolute;
              top: 0;
              right: 0;
            }
          }
          .card-content {
            padding: 12px 13px 6px 12px;
            box-sizing: border-box;
            height: calc(100% - 30px);

            .variety {
              padding-left: 23px;
              margin-bottom: 14px;
              font-size: 14px;
              color: #727272;
              span {
                color: rgba(0, 0, 0, 0.9);
              }
            }
            .process {
              padding-left: 23px;
              padding-right: 69px;
              margin-bottom: 22px;
              white-space: nowrap;
              display: flex;
              font-size: 14px;
              color: #727272;
              .process-box {
                width: 95%;
                padding-top: 3px;
                box-sizing: border-box;
              }
            }
            .table {
              display: flex;
              height: 70px;
              border-radius: 8px;
              margin-bottom: 12px;
              background: linear-gradient(#f0f0f0 0%, rgba(224, 224, 224, 0) 100%);
              .flex-item {
                display: flex;
                flex: 1;
                padding: 10px 10px 16px 10px;
                box-sizing: border-box;
                text-align: center;
                flex-direction: column;
                justify-content: space-between;

                span:first-child {
                  white-space: nowrap;
                  font-size: 12px;
                  color: #727272;
                  i {
                    width: 10px;
                    height: 10px;
                    border-radius: 50px;
                    background-color: #0bc15e;
                    display: inline-block;
                    margin-right: 4px;
                  }
                  i.stop {
                    background-color: #ff2a2a;
                  }
                  i.off {
                    background-color: #adadad;
                  }
                }
                span:last-child {
                  white-space: nowrap;
                  font-size: 14px;
                  font-weight: bold;
                  color: rgba(0, 0, 0, 0.9);
                }
              }
              .divider {
                height: 30px;
                margin: 20px 2px;
              }
            }

            .box {
              padding: 9px 0 10px 0;
              height: calc(100% - 20px);
              background: #fff;
              margin-left: -10px;
              margin-right: -10px;
              .box-item {
                display: flex;
                flex: 1;
                text-align: center;
                flex-direction: column;
                border-radius: 8px;
                margin: 0 10px;
                background: linear-gradient(#f0f0f0 0%, rgba(224, 224, 224, 0) 100%);

                .el-icon {
                  margin: 15px auto;
                  font-size: 40px;
                }

                span:nth-child(2) {
                  white-space: nowrap;
                  font-size: 12px;
                  color: #727272;
                  margin-bottom: 5px;
                }
                span:last-child {
                  white-space: nowrap;
                  font-size: 14px;
                  font-weight: bold;
                  color: rgba(0, 0, 0, 0.9);
                }
              }
            }
          }
        }
      }
    }
  }
</style>
